<script setup>
import dayjs from 'dayjs';
import { useProjectManagerDetailTag } from '@/hooks/project-control/useProjectViewDetailTag';

const route = useRoute();
const router = useRouter();
const store = useStore();
const goBeforeRoute = computed(() => store.getters.goBeforeRoute);
const year = ref(dayjs().format('YYYY'));
const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
const options = Array.from({ length: 1000 }).map((_, idx) => ({
  value: `Option${idx + 1}`,
  label: `${initials[idx % 10]}${idx}`,
}));
const value = ref(options[0].value);

const { activeTabsValue, detailTabs, addTab, removeTab, routerTo } = useProjectManagerDetailTag(options, router);

const handleDetailClick = () => {
  router.push({
    path: goBeforeRoute.value,
  });
};

onMounted(() => {
  const index = detailTabs.value.findIndex(item => item.name === route.value?.params?.option);
  if (index === -1 && route?.fullPath.includes('/project-control/project-work/workbench-homepage')) {
    routerTo();
  }
});
</script>

<template>
  <el-container class="container">
    <el-header class="header">
      <div class="title">
        <iconify-icon icon="ep:home-filled" :width="16" :height="16" color="#fff"></iconify-icon>
        <label class="title__label">项目工作台</label>
      </div>
      <div class="option">
        <el-date-picker
          class="option__year"
          v-model="year"
          format="YYYY"
          value-format="YYYY"
          type="year"
          placeholder="请选择年份"
        />
        <el-select-v2
          class="option__select"
          v-model="value"
          :options="options"
          placeholder="请选择"
          filterable
          clearable
          @change="(value) => addTab(value)"
        />
      </div>
      <div class="operate">
        <div class="operate__close" @click="handleDetailClick">
          <iconify-icon title="关闭" icon="ep:close" :width="12" :height="12" color="#fff"></iconify-icon>
        </div>
      </div>
    </el-header>
    <el-main class="main">
      <router-view #="{ Component, route }">
        <keep-alive>
          <component :is="Component" :key="route.fullPath"/>
        </keep-alive>
      </router-view>
    </el-main>
    <el-footer class="footer">
      <el-tabs
        v-model="activeTabsValue"
        class="footer__tabs"
        closable
        @tab-change="routerTo"
        @tab-remove="removeTab"
      >
        <el-tab-pane
          v-for="item in detailTabs"
          :key="item.name"
          :name="item.name"
        >
          <template #label>
            <div class="tabs-pane__label">
              <div class="tabs-pane__label--prefix"></div>
              {{ item.title }}
              <div class="tabs-pane__label--suffix"></div>
             </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </el-footer>
  </el-container>
</template>

<style lang="scss" scoped>
$header-height: 56px;
$footer-height: 48px;

.container {
  width: 1920px;

  .header {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    height: $header-height;
    background: #020F1B;

    .title {
      display: flex;

      .title__label {
        margin-left: 2px;
        color: #fff;
        height: 19px;
        line-height: 19px;
        font-size: 16px;
        font-weight: 400;
        color: #FFFFFF;
        letter-spacing: 1px;
      }
    }

    .option {
      display: flex;
      justify-content: center;

      :deep(.option__year) {
        width: 126px;
      }

      .option__select {
        margin-left: 16px;
      }
    }

    .operate {
      display: flex;
      justify-content: flex-end;

      .operate__close {
        display: flex;
        justify-content: center;
        width: 24px;
        height: 24px;
        cursor: pointer;
      }
    }
  }

  .main {
    height: calc(100vh - $header-height - $footer-height);
  }

  .footer {
    height: $footer-height;
    background: #F6F7FB;

    .footer__tabs {
      :deep(.el-tabs__header) {
        margin: 0;

        .el-tabs__item {
          padding: 0;
          font-size: 14px;
          font-weight: 400;
          color: #989DA3;

          .tabs-pane__label {
            display: flex;

            .tabs-pane__label--prefix {
              width: 16px;
              height: 16px;
            }

            .tabs-pane__label--suffix {
              width: 16px;
              height: 16px;
            }
          }

          .is-icon-close {
            margin-right: 5px;
          }
        }

        .is-active {
          background: #FFF;
          font-size: 14px;
          font-weight: 400;
          color: #25292C;
        }
      }
    }
  }
}
</style>
